<template>
  <div id="container" />
</template>

<script>
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'
export default {
  mounted() {
    // const data = [
    //   { item: '工作效率', a: 70, b: 30 },
    //   { item: '考勤', a: 60, b: 70 },
    //   { item: '积极性', a: 50, b: 60 },
    //   { item: '帮助同事', a: 40, b: 50 },
    //   { item: '自主学习', a: 60, b: 70 },
    //   { item: '正确率', a: 70, b: 50 }
    // ]
    // const { DataView } = DataSet
    // const dv = new DataView().source(data)
    // dv.transform({
    //   type: 'fold',
    //   fields: ['a', 'b'], // 展开字段集
    //   key: 'user', // key字段
    //   value: 'score' // value字段
    // })

    // const chart = new Chart({
    //   container: 'container',
    //   autoFit: true,
    //   height: 500
    // })
    // chart.data(dv.rows)
    // chart.scale('score', {
    //   min: 0,
    //   max: 80
    // })
    // chart.coordinate('polar', {
    //   radius: 0.8
    // })
    // chart.tooltip({
    //   shared: true,
    //   showCrosshairs: true,
    //   crosshairs: {
    //     line: {
    //       style: {
    //         lineDash: [4, 4],
    //         stroke: '#333'
    //       }
    //     }
    //   }
    // })
    // chart.axis('item', {
    //   line: null,
    //   tickLine: null,
    //   grid: {
    //     line: {
    //       style: {
    //         lineDash: null
    //       }
    //     }
    //   }
    // })
    // chart.axis('score', {
    //   line: null,
    //   tickLine: null,
    //   grid: {
    //     line: {
    //       type: 'line',
    //       style: {
    //         lineDash: null
    //       }
    //     }
    //   }
    // })

    // chart
    //   .line()
    //   .position('item*score')
    //   .color('user')
    //   .size(2)
    // chart
    //   .point()
    //   .position('item*score')
    //   .color('user')
    //   .shape('circle')
    //   .size(4)
    //   .style({
    //     stroke: '#fff',
    //     lineWidth: 1,
    //     fillOpacity: 1
    //   })
    // chart
    //   .area()
    //   .position('item*score')
    //   .color('user')
    // chart.render()

    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/flare.json')
      .then((res) => res.json())
      .then((data) => {
        const dv = new DataSet.View().source(data, {
          type: 'hierarchy'
        })
        dv.transform({
          type: 'hierarchy.circle-packing'
        })
        const diameter = Math.min(window.innerWidth, 500)

        const chart = new Chart({
          container: 'container',
          height: diameter,
          width: diameter,
          padding: 0
        })
        chart.axis(false)
        chart.legend(false)
        chart.tooltip({
          showTitle: false,
          showMarkers: false
        })

        const nodes = dv.getAllNodes().map((node) => ({
          hasChildren: !!(node.data.children && node.data.children.length),
          name: node.data.name.split(/(?=[A-Z][^A-Z])/g).join('\n'),
          value: node.value,
          depth: node.depth,
          x: node.x,
          y: node.y,
          r: node.r
        }))

        chart.data(nodes)
        chart.scale({
          x: { nice: true },
          y: { nice: true }
        })
        chart
          .point()
          .position('x*y')
          .color('hasChildren')
          .shape('circle')
          .tooltip('name')
          .size('r', (r) => r * diameter)
          .color('r', 'rgb(252, 253, 191)-rgb(231, 82, 99)-rgb(183, 55, 121)')
          .style({
            stroke: 'rgb(183, 55, 121)'
          })
          .label('name', {
            offset: 0,
            style: {
              textBaseline: 'middle',
              fill: 'grey',
              fontSize: 9,
              textAlign: 'center'
            },
            layout: {
              type: 'fixed-overlap'
            }
          })
        chart.interaction('element-active')

        chart.render()
      })
  }
}
</script>
